<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Eloquent Javascript Notes-Events-jqfocus.com</title>
        <link rel="stylesheet" type="text/css" href="css/global.css">
        </link>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        </link>
        <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
        </script>
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <style>
            article, aside, figure, footer, header, hgroup, menu, nav, section {
                display: block;
            }
            
            header {
                font-size: 1.2em;
                font-weight: bold;
                padding: 10px;
            }
            
            #log {
                color: red;
				left: 0;
			    margin-left: 150px;
				padding:15px 0;
			    position: absolute;
			    top: 0;
			    width: 200px;
				height:500px;
				overflow:hidden;
				display:none;
				text-align:center;
            }
			.demo-tip{font-size:1.0em;color:#000;font-style:normal;}
        </style>
    </head>
    <body style="width:110%;">
        <header id="hello" class="demo-part">
            1,Event object's clientX,pageX,and pageXOffset
        </header>
        <section class="demo-part">
        	<div class="demo-tip">
            Event objects related to the mouse contain clientX and clientY properties, which give the x and y coordinates of the mouse, in pixels, on the screen.
            Documents can scroll, though, so often these coordinates do not tell us much about the part of the document that the mouse is over.
            Some browsers provide pageX and pageY properties for this purpose, but others (guess which) do not.
            Fortunately, the information about the amount of pixels the document has been scrolled can be found in document.body.scrollLeft and document.body.scrollTop.
        	</div>
			<br/>
			<button id="btn">
            	I'm a button
        	</button>
		</section>
		<header class="demo-part">
            2,keypress event
        </header>
        <section class="demo-part">
        	<div class="demo-tip">
            Internet Explorer does not generate a keypress event at all for special keys such as the arrow keys.You can try it out!
        	</div>
		</section>
		<header class="demo-part">3,Normalise event object</header>
		<section class="demo-part">
			<pre class="brush:js;">
			function normaliseEvent(event) {
			  if (!event.stopPropagation) {
			    event.stopPropagation = function() {this.cancelBubble = true;};
			    event.preventDefault = function() {this.returnValue = false;};
			  }
			  if (!event.stop) {
			    event.stop = function() {
			      this.stopPropagation();
			      this.preventDefault();
			    };
			  }
			
			  if (event.srcElement && !event.target)
			    event.target = event.srcElement;
			  if ((event.toElement || event.fromElement) && !event.relatedTarget)
			    event.relatedTarget = event.toElement || event.fromElement;
			  if (event.clientX != undefined && event.pageX == undefined) {
			    event.pageX = event.clientX + document.body.scrollLeft;
			    event.pageY = event.clientY + document.body.scrollTop;
			  }
			  if (event.type == "keypress") {
			    if (event.charCode === 0 || event.charCode == undefined)
			      event.character = String.fromCharCode(event.keyCode);
			    else
			      event.character = String.fromCharCode(event.charCode);
			  }
			
			  return event;
			}				
			</pre>	
		</section>
        <aside id="log"></aside>
        <script type="text/javascript">
            //<![CDATA[
			var $log=$("#log"),btn=$("#btn")[0],timer0;
			$log.log=function(msg){
			  	$log.fadeIn("slow").prepend(msg+" @"+new Date().toLocaleTimeString()+"<br/>-----<br/>");
				window.clearTimeout(timer0);
				timer0=window.setTimeout(function(){
					$log.fadeOut();
				},5000);
			  	return $log;
			};
			
			
			//in order to find out the differences between various browsers,we define our own attachEvt function
			
			var attachEvt=function(dom,evtName,handler){
			  	var action=window.addEventListener?dom.addEventListener:dom.attachEvent;
			  	evtName=window.addEventListener?evtName:"on"+evtName;
			  	action.call(dom,evtName,handler,false);
			  
			};
			
			//click
			attachEvt(btn,"click",function(e){
			  	e=e||window.event;
			  	var target=e.srcElement||e.target;
			  	$log.log("click")
			    	.log("clientX:"+e.clientX)
			    	.log("pageX:"+e.pageX)
			    	.log("window.pageXOffset:"+(window.pageXOffset))
			    	.log("document.body.scrollLeft:"+document.documentElement.scrollLeft)
			    	.log("target:"+target.id);
			});
			
			//mousedown
			attachEvt(btn,"mousedown",function(){
			  	$log.log("mousedown");
			});
			
			//mouseup
			attachEvt(btn,"mouseup",function(){
			  	$log.log("mouseup");
			});
			
			//dblclick
			attachEvt(btn,"dblclick",function(){
			  	$log.log("dblclick");
			});
			
			//keypress-According to the book 'eloquent javascript',IE won't generate keypress event on arrow keys..
			attachEvt(document,"keypress",function(e){
				e=e||window.event;
				var charCode=e.charCode,udf;
				if(charCode===udf||charCode==0) charCode=e.keyCode;
				$log.log("keypress:["+String.fromCharCode(charCode)+"]");
			});
						
            //]]>
        </script>
    </body>
</html>
